<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor for Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      PaintPot: (Parte 1) - App Inventor para Android
    </title>
    <link href="../../../static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="../../../static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="../../../static/css/appinventor.css" rel="stylesheet" type="text/css">
<!-- ADD Google Analytics here -->
<!-- END Google Analytics here -->
    <style type="text/css">
img.c4 {border-width:0}
    ul.c3 {list-style-type: lower-alpha}
    img.c2 {padding: 10px;}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="../../../about/index.html"><img alt="" src="../../../static/images/appinventor_logo.gif"></a>
          </div>
            <div class="header-search">
<!-- ADD Google Custom Search -->
<!-- END Google Custom Search -->
              <div class="header-search-query">
              </div>
              <div class="header-search-button">
              </div>
            </div>
          <div class="header-login">
            <div class="header-login-greeting">
              Aprende acerca de App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
<!-- ADD Google Search Results -->
<div id="cse" style="width:100%;height:0;"></div>
<!-- END Google Search Results -->
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="../../../about/index.html">Acerca de</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="../../../learn/index.html">Aprende</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="../../../forum/index.html">Foro</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="">Mis Proyectos</a><div>(próximamente)</div>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="../../../learn/index.html">Aprende</a> &gt; <a href="../../../learn/tutorials/index.html">Tutoriales</a> &gt; PaintPot:(Parte 1)  &gt;
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                PaintPot: (Parte 1)
              </h1>
              <p>
                Este tutorial introduce el componente <span class="ButtonText">Canvas</span> (lienzo) para crear gráficos simples de dos dimensiones. Construirás una aplicación que te permite dibujar en la pantalla del teléfono con diferentes colores.
              </p>
              <blockquote class="notice">
                <em>Nota histórica:</em> PaintPot fue uno de los primeros programas desarrollados para demostrar el potencial de las computadoras personales, tan atrás como en los años 70.
              </blockquote>
              <h2>
                Que estás construyendo
              </h2><img align="right" alt="Captura de pantalla de PaintPot finalizada." class="c2" src="PaintPotAssets/PaintPotPart1PhoneImage.png" width="300">
              <p>
                Con la aplicación PaintPot puedes:
              </p>
              <ul>
                <li>
                  <p>
                    Mojar tu dedo en en bote de pintura virtual para dibujar con ese color.
                  </p>
                </li>
                <li>
                  <p>
                    Arrastrar tu dedo por la pantalla para dibujar una linea.
                  </p>
                </li>
                <li>
                  <p>
                    Pulsar la pantalla para hacer puntos.
                  </p>
                </li>
                <li>
                  <p>
                    Usar un botón para limpiar la pantalla.
                  </p>
                </li>
                <li>
                  <p>
                    Incluir una imagen como fondo del dibujo.
                  </p>
                </li>
              </ul>Este tutorial supone que ya has completado el <a href="../../setup/hellopurr/hellopurremulatorpart1.html"><em>Tutorial HelloPurr con el emulador</em></a> o el <a href="../../setup/hellopurr/hellopurrphonepart1.html"><em>Tutorial HelloPurr con tu teléfono android</em></a>. El cual introduce los siguientes conceptos de App Inventor:
              <ul>
                <li>
                  <p>
                    El componente <span class="ButtonText">Canvas</span> (Lienzo) para dibujar.
                  </p>
                </li>
                <li>
                  <p>
                    Control de la apariencia de la pantalla con componentes <span class="ButtonText">Arrangement</span> (disposición).
                  </p>
                </li>
                <li>
                  <p>
                    Control de eventos que toman argumentos.
                  </p>
                </li>
                <li>
                  <p>
                    Variables
                  </p>
                </li>
              </ul><br clear="all">
              <h2>
                Antes de empezar
              </h2>
              <p>
                Asegúrate de que tu computadora y tu teléfono están preparados para usar App Inventor, y navega hasta el sitio web de App Inventor en <a href="http://appinventor.googlelabs.com">appinventor.googlelabs.com</a>. Comienza un nuevo proyecto en la ventana del <em>Diseñador</em>, y llámalo <em>PaintPot</em>. Abre el Editor de bloques, haz clic en <span class="ButtonText">Connect to Phone</span>(conectar al teléfono), y asegúrate de que el teléfono ha iniciado la aplicación App Inventor. 
              </p>
              <h2>
                Título de la pantalla
              </h2>
              <p>
                Para empezar, ve al panel <span class="ButtonText">Properties</span>
              </p>(propiedades) a la derecha del <span class="ButtonText">Designer</span> (diseñador) y cambia <span class="ButtonText">Title</span> (título) de la pantalla a <em>PaintPot</em>. Deberías ver este cambio en el teléfono, con el nuevo título mostrándose en la barra de título.
              <blockquote>
                Hay tres nombres en App Inventor, y es fácil confundirlos:
                <ol>
                  <li>El nombre que eliges para tu proyecto mientras trabajas en el. Este será también el nombre de la aplicación si la empaquetas para el teléfono.
                  </li>
                  <li>El nombre de "Screen1" (pantalla1), que verás en en panel que enumera los componentes de la aplicación. No puedes cambiar este nombre en la versión actual de App Inventor.
                  </li>
                  <li>El <span class="ButtonText">Titulo</span> (Títle) de la pantalla, el cual es el que veras en la barra de título del teléfono. Este comienza siendo "Screen1", que es el que usaste en HelloPurr. Pero puedes cambiarlo, como estás haciendo para Paintpot.
                  </li>
                </ol>
              </blockquote>
              <h2>
                Prepara los componentes
              </h2>
              <p>
                Usarás estos componentes para crear PaintPot:
              </p>
              <ul>
                <li>Tres <span class="ButtonText">botones</span> para seleccionar pintura roja, azul o verde y otro botón para limpiar el dibujo. 
                </li>
                <li>Un <span class="ButtonText">Lienzo</span>(canvas), la superficie de dibujo. Este <span class="ButtonText">lienzo</span> tiene una <span class="ButtonText">imagen de fondo</span>, la cual es el gatito del tutorial HelloPurr. También puedes dibujar en un lienzo en blanco. Este es solo un <span class="ButtonText">lienzo</span> sin imagen de fondo.
                </li>
                <li>También hay un componente que no ves: usas un componente <span class="ButtonText">HorizontalArrangement</span> (disposición horizontal) para alinear los tres botones de color.
                </li>
              </ul>
              <p>
                Esto hace cinco componentes en total. Tomemoslos y construyamos la aplicación.
              </p>
              <h2>
                Botones de color
              </h2>
              <ul>
                <li>Arrastra un componente <span class="ButtonText">Botón</span> al visor y cambia el atributo <span class="ButtonText">Text</span> del botón a "Red" (rojo) y su  <span class="ButtonText">color de fondo</span> (BackgroundColor) a rojo.
                </li>
                <li>Haz clic en <span class="ButtonText">Button1</span> en la lista de componentes del visor para resaltarlo (ya debería estar resaltado) y usa el botón <span class="ButtonText">Rename...</span> para cambiar su nombre de <span class="ButtonText">Button1</span> a <span class="ButtonText">ButtonRed</span>.
                </li>
                <li>Del mismo modo, crea dos botones para el azul y el verde, llámalos <span class="ButtonText">ButtonBlue</span> y <span class="ButtonText">ButtonGreen</span>, colocándolos verticalmente bajo el botón rojo.
                </li>
              </ul>Así es como esto debería aparecer en el diseñador, con los tres nombres de los botones en la lista de componentes del proyecto. En este proyecto estás cambiando los nombres de los componentes mejor que dejando sus nombres por defecto, como hiciste en HelloPurr. Usar nombres significativos en tus proyectos los hace mas fáciles de leer para tí mismo y para otros.
              <div class="imagecontainer">
                <img alt="Captura de pantalla con 3 botones verticales." src="PaintPotAssets/PaintPotThreeButtonsVertically.png" width="600">
              </div>
              <p>
                También deberías ver los tres botones en la pantalla del teléfono.
              </p>
              <h2>
                Apariencia con Disposición de pantalla (Screen Arrangemen)
              </h2>
              <p>
                Ahora debes tener tres botones, uno encima de otro. El siguiente paso es alinearlos horizontalmente. Harás esto usando un componente <span class="ButtonText">HorizontalArrangement</span> (disposición horizontal).
              </p>
              <ol>
                <li>Desde la categoría Screen Arrangement de la paleta, arrastra un componente <span class="ButtonText">HorizontalArrangement</span> y colócalo bajo los botones. Cambia el nombre de este componente de <span class="ButtonText">HorizontalArrangement1</span> a <span class="ButtonText">ThreeButtons</span>
                </li>
                <li>En el panel <span class="ButtonText">Properties</span> (Propiedades), cambia <span class="ButtonText">Width</span>(ancho) de <span class="ButtonText">ThreeButtons</span> a <em>Fill Parent...</em> por lo que llenará por completo el ancho de la pantalla.
                </li>
                <li>Mueve los tres botones dentro del componente <span class="ButtonText">HorizontalArrangement</span>. <em>Nota:</em> Veras una linea vertical que muestra donde irá la pieza que estas arrastrando.
                </li>
              </ol>
              <p>
                Si miras la lista de componentes del proyecto, veras los tres botones incluidos bajo <span class="ButtonText">ThreeButtons</span> para indicar que son ahora sus subcomponentes. Fíjate en que todos los componentes están incluidos bajo Screen1.
              </p>
              <div class="imagecontainer">
                <img alt="" src="PaintPotAssets/PaintPotThreeButtonsHorizontally.png" width="600">
              </div>
              <p>
                También debes ver tus tres botones alineados en una fila en la pantalla del teléfono, aunque algunas cosas no aparezcan exactamente como en el <span class="ButtonText">Diseñador</span>. Por ejemplo, el borde de la Disposición (Arrangement) se muestra en el <span class="ButtonText">Diseñador</span> pero no en el teléfono.
              </p>
              <p>
                Generalmente, usarás la Disposición de pantalla para crear simples diseños verticales u horizontales. Puedes crear diseños mas complejos anidando componentes de disposición de pantalla. Existe ademas un  componente Disposición de Tabla <span class="ButtonText">TableArrangement</span> (no se verá en este tutorial).
              </p>
              <h2>
                Lienzo y botón de limpieza
              </h2>
              <p>
                Los dos componentes finales son el lienzo (canvas) y el botón de limpieza.
              </p>
              <ol>
                <li>Desde la categoría <em>Basic</em> de la Paleta arrastra un componente <span class="notice">Lienzo</span> (Canvas) al Visor. Cambia su nombre a  <span class="ButtonText">DrawingCanvas</span>. Establece el atributo <span class="ButtonText">Width</span> (ancho) a <span class="ButtonText">Fill Parent</span> Establece el atributo <span class="ButtonText">Height</span> (alto) a 300 píxeles.
                </li>
                <li>Añade un imagen de fondo (Background Image) al <span class="ButtonText">lienzo</span>. Haz clic en el campo conteniendo <em>None...</em> junto a <span class="ButtonText">BackgroundImage</span> en el panel de Propiedades del <span class="ButtonText">lienzo</span> Puedes usar el mismo archivo kitty.png, si todavía lo tienes en el escritorio de un tutorial anterior. O puedes usar otra imagen.
                  <blockquote class="notice">
                        Puedes usar cualquier imagen que quieras, pero obtendrás mejores resultados si el tamaño de la imagen (en píxeles) se aproxima al tamaño que mostraras en el teléfono. Además, imagenes grandes pueden tardar mas tiempo en cargarse, y pueden exceder la cantidad de memoria que el teléfono asigna para las aplicaciones. 
                  </blockquote>
                </li>
                <li>Desde la Paleta, arrastra el botón final a la pantalla, colocándolo bajo el lienzo. Cambia su <span class="ButtonText">id</span> a <em>ButtonWipe</em> Cambia su atributo <span class="ButtonText">Text</span> a <em>Wipe</em>.
                </li>
              </ol>
              <p>
                Ahora habrás completado los pasos para configurar la apariencia de tu aplicación. Así es como debería aparecer en el <span class="ButtonText">Diseñador</span>. A continuación, definirás como se comportan los componentes.
              </p>
              <div class="imagecontainer">
                <img alt="Designer view of finished paint pot app." src="PaintPotAssets/PaintPotDesigner.png" width="600">
              </div>
              <h2>
                Añade comportamientos a los componentes 
              </h2>
              <p>
                El Editor de bloques debe estar ya abierto. Primero configura los botones que cambian el color de la pintura.
              </p>
              <h2>
                Agregar controladores de eventos de botón
              </h2>
              <p>
                En el Editor de bloques:
              </p>
              <ol>
                <li>Cambia a la columna <em>My Blocks</em>.
                </li>
                <li>
                  <p>
                    Abre el cajón de <span class="ButtonText">ButtonRed</span> y arrastra fuera el bloque <span class="Block">when ButtonRed.Click</span>.
                  </p>
                </li>
                <li>
                  <p>
                    Abre el cajón <span class="ButtonText">DrawingCanvas</span>. Arrastra fuera el bloque <span class="Block">set DrawingCanvas.PaintColor to</span> (tendrás que desplazar la lista de bloques del cajón para encontrarlo) y colócalo en la sección <span class="Block">do</span> (hacer) de <span class="Block">when ButtonRed.Click</span>.
                  </p>
                </li>
                <li>
                  <p>
                    Cambia a la columna <span class="ButtonText">Built-In</span>. Abre el cajón <span class="ButtonText">Colors</span>, arrastra el bloque para el color rojo <span class="ButtonText">Red</span> y colócalo en <span class="ButtonText">set DrawingCanvas.PaintColor to</span>.
                  </p>
                </li>
                <li>
                  <p>
                    Repite los pasos del 2 al 4 para los botones azul y verde.
                  </p>
                </li>
                <li>
                  <p>
                    El último botón que configurar es el de limpieza <span class="ButtonText">Wipe</span>. Cambia de nuevo a la columna <span class="ButtonText">My Blocks</span>. Crea un controlador de evento clic para <span class="ButtonText">ButtonWipe</span> arrastrando <span class="Block">when ButtonWipe.Click</span> desde el cajón <span class="ButtonText">ButtonWipe</span>. Desde el cajón <span class="ButtonText">DrawingCanvas</span> , arrastra  <span class="Block">call DrawingCanvas.Clear</span> y colócalo en el área <span class="Block">do</span> del bloque <span class="Block">when ButtonWipe.Click</span>.
                  </p>
                </li>
              </ol>Los bloques para los botones deben parecerse a esto:
              <div class="imagecontainer">
                <img alt="Bloques de botón en el editor de bloques." src="PaintPotAssets/PaintPotButtonBlocks.png" width="600">
              </div>
              <h2>
                Agregar controlador de evento tocar
              </h2>
              <p>
                Ahora para el siguiente paso: dibujar en el lienzo. Organizaras las cosas para que cuando toques el lienzo, obtengas un punto en el lugar donde toques. Y si arrastras tu dedo lentamente por el lienzo, se dibuje ua linea.
              </p>
              <ul>
                <li>
                  <p>
                    En el Editor de bloques, abre el cajón del lienzo (canvas) y arrastra el bloque <span class="Block">when DrawingCanvas.Touched</span> al espacio de trabajo.
                  </p>
                </li>
              </ul>
              <p>
                Tan pronto como sueltes fuera el bloque, los tres huecos de la derecha se llenarán automáticamente con bloques de nombres llamados <span class="ButtonText">x</span>, <span class="ButtonText">y</span>, y <span class="ButtonText">touchedSprite</span>.
              </p>
              <p>
                Ya hemos visto eventos de botón clic. Los clics son simples, porque no hay nada que saber sobre el clic que no sea que ha sucedido. Otros controladores de eventos, tales como <span class="Block">when ... Touched</span>, necesitan información sobre el evento. En App Inventor, esta información se expresa como el valor de los <em>argumentos</em> relacionados con el controlador de eventos. Para el evento <span class="Block">when ... Touched</span> los dos primeros argumentos representan las coordenadas <em>x</em> e <em>y</em> de donde sucedió el toque. Vamos a dejar <span class="ButtonText">touchedSprite</span> para otro tutorial más adelante.
              </p>
              <p>
                Para este evento tocar, haz al lienzo dibujar un pequeño circulo en el punto con las coordenadas <em>x</em>, <em>y</em>.
              </p>
              <ul>
                <li>Arrastra fuera un comando <span class="Block">call DrawingCanvas.DrawCircle</span> desde el cajón canvas y colócalo en la sección <span class="Block">do</span> de <span class="Block">when DrawingCanvas.Touched</span>.
                </li>
              </ul>
              <p>
                En el lado derecho de <span class="Block">when DrawingCanvas.DrawCircle</span> hay tres conexiones donde debes especificar los valores para <em>x</em> e <em>y</em> donde debe dibujarse el circulo y <span class="ButtonText">r</span>, el cual es el radio del circulo.
              </p>
              <p>
                Para <em>x</em> e <em>y</em>, usarás los valores de los argumentos proporcionados por el controlador <span class="ButtonText">Touched</span>:
              </p>
              <ol>
                <li>Abre el cajón <span class="ButtonText">My Definitions</span> en la parte superior de la columna. Busca los bloques para <span class="ButtonText">value x</span> y <span class="ButtonText">value y</span>. Los bloque se crearon automáticamente cuando arrastraste el bloque del controlador de evento tocar.
                </li>
                <li>
                  <p>
                    Arrastra <span class="Block">value x</span> y <span class="Block">value y</span> conéctalos en sus lugares correspondientes en el bloque <span class="Block">when DrawingCanvas.Touched</span> block. Asegúrate de arrastrar los bloques de <span class="Block">value</span> no los que corresponden a <span class="Block">name</span>, son muy similares. 
                  </p>
                </li>
              </ol>También necesitaras especificar el radio del circulo que dibujar. Cinco (píxeles) es un buen valor para esta aplicación:
              <ul>
                <li>
                  <p>
                    Haz clic en un área vacía del la pantalla para que aparezca el menú activable y selecciona matemáticas <span class="ButtonText">math</span> (verde). Selecciona 123 de la lista desplegable, para crear un bloque numero. Cambia el 123 a 5 y conéctalo al hueco para el radio.
                  </p>
                  <blockquote class="notice">
                    <p>
                      También puedes solo escribir 5 seguido de Intro, para crear un bloque con el valor 5. Esto es un ejemplo de <em>typeblocking</em>: si comienzas a escribir, el Editor de bloques muestra uns lista de bloques cuyos nombres coinciden con lo que estas escribiendo, si pulsas un numero creará un bloque numero.
                    </p>
                  </blockquote>
                </li>
              </ul>Así es como debería verse el controlador de evento tocar:
              <div class="imagecontainer">
                <img alt="Bloques para el controlador de evento tocar." height="228" src="PaintPotAssets/PaintPotTouchHandler.png" width="445">
              </div>
              <p>
                Prueba lo que has hecho hasta ahora en el teléfono. Toca un botón de color. Ahora toca el lienzo, y tu dedo debe dejar un punto en cada lugar que toques. Pulsando el botón <span class="ButtonText">Wipe</span> debes limpiar tu dibujo.
              </p>
              <h2>
                Añade Eventos de arrastre
              </h2>
              <p>
                Finalmente, añade el controlador de evento de arrastre. Esta es la diferencia entre tocar y arrastrar:
              </p>
              <ul>
                <li>Un toque es cuando colocas tu dedo en el lienzo y lo levantas sin moverlo.
                </li>
                <li>Un arrastre es cuando es cuando colocas tu dedo en el lienzo y mueves tu dedo mientras lo mantienes en contacto.
                </li>
              </ul>
              <p>
                Cuando arrastras tu dedo por la pantalla, parece dibujar una gran linea curva por donde mueves tu dedo. Lo que realmente haces es dibujar cientos de pequeñas lineas rectas: cada vez que mueves el dedo, incluso muy poco, extiendes la linea desde la última posición de tu dedo a la nueva posición.
              </p>
              <p>
                Un evento de arrastre tiene 6 argumentos. Estos son tres pares de coordenadas <em>x</em> e <em>y</em> que muestran:
              </p>
              <ul class="c3">
                <li>La posición anterior de tu dedo donde comenzó el arrastre.
                </li>
                <li>La posición actual de tu dedo.
                </li>
                <li>La posición inmediatamente anterior de tu dedo.
                </li>
              </ul>
              <p>
                También hay un sprite, el cual ignoraremos en este tutorial.
              </p>
              <p>
                Ahora haz que arrastrar dibuje una linea entre la posición previa y la actual creando un controlador de arrastre:
              </p>
              <ol>
                <li>
                  <p>
                    Desde el cajón <span class="ButtonText">DrawingCanvas</span>, arrastra el bloque <span class="Block">when DrawingCanvas.Dragged</span> al espacio de trabajo.
                  </p>
                </li>
                <li>
                  <p>
                    También desde el cajón <span class="ButtonText">DrawingCanvas</span>, arrastra el bloque <span class="Block">call DrawingCanvas.DrawLine</span> al hueco <span class="Block">do</span> (hacer) del bloque <span class="Block">when DrawingCanvas.Dragged</span>.
                  </p>
                </li>
                <li>
                  <p>
                    Haz clic en el cajón <span class="ButtonText">My Definitions</span> Debes ver los bloques para los argumentos que necesitas. Arrastra los bloques de <span class="ButtonText">value</span> (valor) correspondientes a los huecos apropiados en <span class="Block">when DrawingCanvas.Dragged</span>: <span class="ButtonText">x1</span> e <span class="ButtonText">y1</span> deben ser <span class="ButtonText">prevX</span> y <span class="ButtonText">prevY</span>; <span class="ButtonText">x2</span> e <span class="ButtonText">y2</span> deben ser <span class="ButtonText">currentX</span> y <span class="ButtonText">currentY</span>
                  </p>
                </li>
              </ol>Aquí está el resultado:
              <div class="imagecontainer">
                <img alt="" height="367" src="PaintPotAssets/PaintPotDragHandler.png" width="452">
              </div>
              <p>
                Prueba tu trabajo en el teléfono: arrastra tu dedo por la pantalla para dibujar lineas y curvas. Toca la pantalla para crear puntos. Usa el botón  <span class="ButtonText">Wipe</span> para limpiar la pantalla.
              </p>
              <h2>
                Revisión
              </h2>
              <p>
                Aquí están algunas de las ideas vistas en este tutorial:
              </p>
              <ul>
                <li>Puedes usar componentes de Disposición de pantalla (Screen Arrangement) para especificar el aspecto en lugar de colocar los componentes uno encima del otro.
                </li>
                <li>El componente <span class="ButtonText">Canvas</span> te permite dibujar en el. Este ademas siente los toques y arrastres.
                </li>
                <li>Algunos controladores de eventos son llamados con información sobre el evento, como las coordenadas de donde se ha tocado la pantalla. Esta información esta representada por argumentos. Cuando seleccionas un controlador de evento que tiene argumentos, App Inventor crea bloques de <span class="Block">value</span> para estos y los coloca en el cajón <span class="ButtonText">My Definitions</span>.
                </li>
              </ul>En la <a href="paintpot-part2.html">Parte 2</a>, veras como usar <em>variables globales</em> para crear puntos de diferente tamaño.
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-legal">
            <p>
              <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license"><img alt="Creative Commons License" class="c4" src="http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
              Este trabajo está bajo una licencia <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license">Creative Commons Attribution 3.0 Unported License</a> .
            </p>
            <p>
              El trabajo original de Google ha sido modificado<br>
              El trabajo modificado fue traducido del Inglés al Español<br>
              <a href="../../../about/index.html">Acerca de</a> | <a href="../../../about/privacy.html">Privacidad</a> | <a href="../../../about/termsofservice.html">Condiciones</a>
            </p>
          </div>
          <div class="footer-lastupdate">
            <script type="text/javascript">
if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

